<template>
  <el-main>
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="订单编号：">
          <el-input v-model="form.value" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="选择日期：">
    <el-date-picker
      v-model="form.value1"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
>
    </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="193"
        >
        </el-table-column>
        <el-table-column prop="skuName" label="商品名称" width="191">
        </el-table-column>
        <el-table-column prop="price" label="订单金额" width="150">
        </el-table-column>
        <el-table-column prop="innerCode" label="设备编号" width="191">
        </el-table-column>
        <el-table-column label="订单状态" width="191">
          出货成功
        </el-table-column>
        <el-table-column prop="createTime" label="订单日期" width="191">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" prop="taskId">
          <template v-slot="{$index }">
            <el-button
              @click.native.prevent="watchDetailsFn($index)"
              type="text"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" v-if="isShow">
        <div>
          <span
            >共{{ totalCount }}条数据 第{{ pageIndex }}/{{ totalPage }}页</span
          >
          <button
            class="add"
            :class="{ active: pageIndex === '1' }"
            @click="addFn"
            ref="btn"
          >
            上一页
          </button>
          <button
            class="next"
            :class="{ active: pageIndex === totalPage }"
            @click="nextFn"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
       <el-dialog
      title="订单详情"
      :visible.sync="dialogWorkDetails"
      :append-to-body="true"
      :close-on-click-modal="false"
      id="work-details"
    >
      <div class="top">
        <img
          src=""
          alt=""
        />
        <span>{{ typeName }}</span>
        <img
          src="http://likede2-admin.itheima.net/img/pic_2.3b5af41c.png"
          alt=""
          class="pic"
        />
      </div>
      <el-form
        :model="workDetails"
        label-width="90px"
        label-position="right"
        :inline="true"
      >
        <el-form-item label="订单编号：">
          <span>{{ workDetails.orderNo }}</span>
        </el-form-item>
        <el-form-item label="商品名称：">
          <span>{{
            workDetails.skuName
          }}</span>
        </el-form-item>
        <el-form-item label="订单金额：">
          <span>{{ workDetails.price }}</span>
        </el-form-item>
        <el-form-item label="设备编号：">
          <span>{{ workDetails.innerCode }}</span>
        </el-form-item>

        <el-form-item label="创建时间：">
          <span
            >{{ workDetails.createTime}}</span
          >
        </el-form-item>
        <el-form-item label="完成时间：">
          <span>{{  workDetails.updateTime}}</span>
        </el-form-item>
        <el-form-item label="支付方式：">
          <span>{{  workDetails.payType==='2'?'微信支付':'支付宝支付'}}</span>
        </el-form-item>
        <el-form-item label="设备地址：">
          <span>{{ workDetails.addr }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-main>
</template>

<script>
import moment from 'moment'
import {
  getOrderSearch,
  delPolicy,
  postPolicy,
  putPolicy
} from '@/api/celue/stategy'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      loading: true,
      num: 10,
      goodData: [],
      getGoodData: [],
      rules: {
        policyName: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        discount: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ]
      },
      dialogFormVisible: false,
      dialogWorkDetails: false,
      dialogForm: {
        policyName: '',
        discount: ''
      },
      formLabelWidth: '120px',
      form: {
        value: '',
        value1: ''
      },
      tableData: [],
      pageIndex: '',
      totalPage: '',
      totalCount: '',
      lookTableData: [],
      lookpageIndex: '',
      looktotalPage: '',
      looktotalCount: '',
      userList: [],
      workDetails: {},
      show: false,
      typeName: '',
      clickType: false,
      lookPolicyId: '',
      title: ''
    }
  },
  async created () {
    this.getFn(1)
  },
  mounted () {},
  methods: {
    deleteRowFn (row) {
      delPolicy(row.policyId, {
        pageIndex: this.pageIndex,
        pageSize: 10,
        policyName: row.policyName
      })
      this.getFn(1)
    },
    closeFn () {
      this.dialogFormVisible = false
      this.$refs.new.resetFields()
    },
    onConfigFn (row) {
      this.dialogForm.discount = row.discount
      this.dialogForm.policyName = row.policyName
      this.policyId = row.policyId
      this.dialogFormVisible = true
      this.clickType = true
    },
    async onConfig () {
      if (this.clickType) {
        try {
          await putPolicy(this.policyId, this.dialogForm)
          this.getFn(1)
          this.closeFn()
        } catch (error) {
          Message({
            message: error.response.data,
            type: 'error',
            customClass: 'message'
          })
        } finally {
          this.clickType = true
        }
      } else {
        try {
          await postPolicy(this.dialogForm)
          this.getFn(1)
          this.closeFn()
        } catch (error) {
          Message({
            message: error.response.data,
            type: 'error',
            customClass: 'message'
          })
        }
      }
    },
    async getFn (num, orderNo, startDate, endDate) {
      const res = await getOrderSearch({
        pageIndex: num,
        pageSize: 10,
        orderNo,
        startDate,
        endDate
      })
      this.pageIndex = res.pageIndex
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      res.currentPageRecords.forEach((item, i) => {
        item.index = (res.pageIndex - 1) * 10 + i + 1
        item.price = (item.price / 100).toFixed(2)
      })
      res.currentPageRecords.forEach((item) => {
        item.createTime = item.createTime
          .replace(/[-]/g, '.')
          .replace(/[T]/, ' ')
        item.updateTime = item.updateTime
          .replace(/[-]/g, '.')
          .replace(/[T]/, ' ')
        item.addr = item.addr.replace(/[\u4e00-\u9fa5]+[-]/g, '')
      })
      this.tableData = res.currentPageRecords
      this.loading = false
    },
    onSubmit () {
      this.form.value1 = this.form.value1.map(item => (item = moment(item).format('YYYY-MM-DD'))
      )
      this.getFn(1, this.form.value, ...this.form.value1)
    },
    addFn () {
      if (this.pageIndex === 1) {
        return
      }
      const num = Number(this.pageIndex) - 1
      this.getFn(num, this.form.value, ...this.form.value1)
    },
    nextFn () {
      if (this.totalCount === this.totalPage) {
        return
      }
      const num = Number(this.pageIndex) + 1
      this.getFn(num, this.form.value, ...this.form.value1)
    },
    watchDetailsFn (index) {
      this.dialogWorkDetails = true
      console.log(this.tableData[index])
      this.workDetails = this.tableData[index]
    }
  },
  computed: {
    isShow () {
      return this.totalCount > 10
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-form {
  .el-form-item__content {
    height: 36px;
  }
}
/deep/ .el-table td.el-table__cell div {
     white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.message {
  z-index: 99999 !important;
}

.el-main {
  width: calc(100vw - 160px);
  min-height: 100%;
  background-color: #f8fafd;
  .search {
    width: 100%;
    height: 62px;
    padding-left: 17px;
    padding-top: 13px;
    background-color: #fff;
    /deep/ .el-form {
      label,
      input {
        line-height: 36px !important;
        height: 36px !important;
      }
      button {
        margin-top: 3px;
        height: 36px !important;
        background-color: #5f84ff;
        border-color: #5f84ff;
        width: 80px;
        text-indent: -3px;
      }
    }
  }
  /deep/ .main {
    min-height: 200px;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    .btn-top {
      height: 36px !important;
      margin-bottom: 20px;
      button {
        height: 36px !important;
        width: 80px !important;
      }
      .el-button--primary {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
        border: none;
        text-indent: -2.5px;
        &:hover {
          background: linear-gradient(135deg, #ff7d43, #db3602) !important;
        }
      }
      .el-button--default {
        background-color: #fbf4f0;
        border: none;
        color: #655b56 !important;
        text-indent: -8px;
        &:hover {
          background-color: #f3e7e1 !important;
        }
      }
    }
    .el-table {
      border: none;
      td,
      tr,
      th {
        color: #666;
        font-weight: 400;
        text-align: center;
        border: none !important;
      }
      th {
        background-color: #f3f6fb !important;
      }
    }
    .footer {
      height: 96px;
      padding: 32px;
      > div {
        display: flex;
        height: 32px;
        span {
          flex: 1;
          color: #dbdfe5;
          font-size: 16px;
        }
        button {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          font-size: 13px;
          text-align: center;
          line-height: 32px;
          border: none;
          cursor: pointer;
          border-radius: 3px;
        }
        .add {
          color: #606266;
          background-color: #d5ddf8;
        }
        .next {
          color: #606266;
          background-color: #d5ddf8;
        }
        .active {
          color: #d8dde3 !important;
          cursor: not-allowed;
          background: #edf0f9;
        }
      }
    }
  }
}
#work-details {
  /deep/.el-dialog {
    height: 415px !important;
    width: 670px !important;
    border-radius: 15px;
  }
  .top {
    display: flex;
    align-items: center;
    height: 54px;
    background-color: #f8f8f8;
    img {
      margin: 0 22px;
    }
    span {
      width: 320px;
    }
    .pic {
      margin-top: -6px;
    }
  }
  /deep/ .el-form {
    padding: 30px 0 10px 10px;
    .el-form-item {
      margin-bottom: 8px;
    }
    .el-form-item__content {
      width: 210px;
      height: 36px;
    }
  }
}
</style>
